<template>
  <el-dialog title="配置项" :model-value="modelValue" width="900px" @close="commEvent.onClose">
    <div class="table-box">
      <el-table :data="tableData">
        <el-table-column prop="type" label="时段类型">
          <template #default="{ row }">
            {{ bandEnum.find(item => item.value === row.type)?.label || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { bandEnum } from "@/utils/enum"
import { electricItemList } from "@/api/modules/parameter"
import { SystemSpace } from "@/api/interface/parameter"
const props = defineProps({
  modelValue: Boolean,
  id: Number
})
const emit = defineEmits(["update:modelValue"])
// 参数
const tableData = ref<SystemSpace.ElectricItemList[]>([]) // 表格数据
// 事件
const commEvent = {
  onClose: () => {
    emit("update:modelValue", false)
  },
  // 获取配置项
  getConfig: async (id: number) => {
    const { data } = await electricItemList(id)
    tableData.value = data
  }
}
watch(
  () => props.modelValue,
  flag => {
    if (flag && props?.id) {
      commEvent.getConfig(props.id)
    }
  }
)
</script>

<style lang="scss" scoped></style>
